<template>
  <el-dialog
      v-model="centerDialogVisible"
      :title="formTitle"
      width="35%"
      destroy-on-close
      center
      @close="dialogClose">
    <!--    计费方案-->
    <div style="height: 300px;overflow-y: auto;">
      <div v-for="(item,index) in dataList" :key="index" :class="'billView billViewi'+item.costPlanId"
           @click="setDevicePlan(item)">
        <div>方案: {{ item.costPlanName }}</div>
        <div class="costPlanColumnInfo">{{ item.costPlanColumnInfo }}</div>
      </div>
    </div>


    <div class="bottomButton" style="width: 100%">
      <el-button class="affirm" @click="centerDialogVisible = false" style="width: 47.5%;height: 100%;">取消</el-button>
      <el-button class="affirm" @click="resetForm" style="width: 47.5%;height: 100%;">确认</el-button>
    </div>
  </el-dialog>

</template>

<script>

import $ from "jquery";
import _ from "underscore";

let component;
export default {
  name: "BillingSchemeTree",
  data() {
    return {
      formTitle: '计费方案绑定',
      centerDialogVisible: false,
      dataList: [],
      previousId: '',
      currentRow: null,
      ids: []
    }
  },
  methods: {
    setDevicePlan(item) {
      $('.billViewi' + component.previousId).removeClass("billViewiActive");
      $('.billViewi' + item.costPlanId).addClass("billViewiActive");
      component.previousId = item.costPlanId;
      component.currentRow = item;
    },
    async selList(deviceType, costPlanId) {
      let response = await component.$asyncPost("costPlan", {
        actionType: "costPlanQuery",
        deviceType: deviceType
      });
      if (response.success) {
        component.dataList = response.dataList;
        component.$nextTick(() => {
          $('.billViewi' + costPlanId).addClass("billViewiActive");
          component.previousId = costPlanId;
        });

        /*    let costPlanIdObj = _.groupBy(component.deviceList, "costPlanId")
            console.log(costPlanIdObj);
            if (Object.keys(costPlanIdObj).length === 1) {
              for (const costPlanId in costPlanIdObj) {
                let selectCostPlan = _.find(component.tableData, function (data) {
                  return data.costPlanId === costPlanId
                })
              /!*  component.setCurrent(selectCostPlan);*!/
                console.log(selectCostPlan);
              }
            }*/
      }
    },

    showDialog(ids, costPlanId, deviceType) {
      component = this;
      component.centerDialogVisible = true;
      component.ids = ids;
      component.selList(deviceType, costPlanId);
    },
    async resetForm() {
      if (component.currentRow) {
        let response = await this.$asyncPost("costPlan", {
          actionType: "costPlanBind",
          costPlan: component.currentRow,
          deviceIds: component.ids,
        });
        if (response.success) {
          component.$message.success("绑定成功");
          component.$parent.queryData();
          component.centerDialogVisible = false;
        }
      }
    },
    dialogClose() {
      this.centerDialogVisible = false;
    }
  }
}
</script>

<style scoped lang="scss">
.billView {
  width: 30%;
  margin-bottom: 30px;
  height: 90px;
  background: rgb(69 69 69);
  color: #e0e9f2;
  float: left;
  margin-left: 12px;
  border-radius: 5px;
  padding: 12px 10px;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background: rgb(156, 168, 163);
  }
}

.billViewiActive {
  background: rgb(156, 168, 163);
}

.costPlanColumnInfo {
  font-size: 12px;
  color: #d9d9d9;
  margin-top: 8px;
}

</style>